<template>
  <el-dialog v-model="dialogVisible" title="订单导出" width="80%" :before-close="handleClose">
    <view class="flex">
      <view class="checkboxGroup" ref="checkboxGroupRef">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item.dict_code" :name="item.dict_code" :value="item.dict_code" v-for="(item,index) in dicts" :key="index">
            {{item.dict_label}}
          </el-checkbox>
        </el-checkbox-group>
      </view>
      <view :style="gridsStyle">
        <div class="flex alignCenter bold textCenter header">
          <div class="grid shrink" v-for="(item,index) in checkList" :key="index">{{label_format(item)}}</div>
        </div>

        <div style="margin:20px 0 0 20px;width:300px">
          <el-input v-model="excelName" placeholder="文件导出名称" />
        </div>
      </view>
    </view>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">
          导 出
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let dicts = ref([]);
let dialogVisible = ref(false);
let checkList = ref([]);
let checkboxWidth = ref(0);
let list = [];
let types = [];
let excelName = ref("");

let gridsStyle = computed(() => {
  let innerWidth = window.innerWidth * 0.8;
  return {
    width: innerWidth - checkboxWidth.value - 40 + "px",
  };
});

let titles = computed(() => {
  let arr = [];
  checkList.value.forEach((element) => {
    arr.push({ name: label_format(element), key: element });
  });
  return arr;
});

function handleClose() {
  excelName.value = "";
  checkList.value = [];
  dialogVisible.value = false;
}

async function save() {
  let arr = [];
  console.log("list", list);
  console.log("checkList.value", checkList.value);
  list.forEach((element) => {
    let fieldObj = {};
    checkList.value.forEach((item) => {
      if (item == "_add_time") {
        fieldObj[label_format(item)] = proxy.$utils.dateTimeFormateFn(
          element[item],
          "all"
        );
      } else {
        fieldObj[label_format(item)] =
          element.approvalContent.model[item] || "";
      }
    });
    arr.push(fieldObj);
  });
  downExcel(arr);
}

async function downExcel(arr) {
  let cols = []; //设置表头样式
  checkList.value.forEach((element) => {
    cols.push({ wch: 20 });
  });
  let query = {
    jsonData: arr,
    cols,
  };
  await proxy.$utils.exportToExcel(
    query,
    excelName.value ? excelName.value : "订单列表导出"
  );
  handleClose();
}

async function getTypes() {
  types = await proxy.$apis.webCurriculum({
    type: "query",
  });
}

async function getDict() {
  let { data } = await proxy.$apis.dict({
    type: "details",
    data: {
      code: "user_info",
    },
  });
  console.log("111", data);
  data.push({
    dict_code: "_add_time",
    dict_label: "报名时间",
    type: "noModal",
  });
  dicts.value = data;
}

function label_format(e) {
  if (!dicts.value.length) return;
  let index = proxy.$utils.findIndexByField(dicts.value, "dict_code", e);
  if (index != -1) return dicts.value[index].dict_label;
}

async function open(array) {
  console.log("params", array);
  list = proxy.$utils.deepcopy(array);
  getTypes();
  await getDict();
  dialogVisible.value = true;
  nextTick(() => {
    checkboxWidth.value = proxy.$refs.checkboxGroupRef.offsetWidth;
  });
  return;
  // let arr = [];
  // array.forEach((element) => {
  //   arr.push(element.curriculum_id);
  // });
  // let newArr = proxy.$utils.unique(arr);
  // if (newArr.length > 1)
  //   return proxy.$utils.showToast("导出的订单只能是相同的课程", 0);
  // let list = [];
  // array.forEach((element) => {
  //   let { model } = element.approvalContent;
  //   let obj = {};
  //   for (let key in model) {
  //     obj[label_format(key)] = model[key];
  //   }
  //   list.push(obj);
  // });

  // let cols = []; //设置表头样式
  // list.forEach((element) => {
  //   cols.push({ wch: 20 });
  // });
  // let query = {
  //   jsonData: list,
  //   cols,
  // };
  // await proxy.$utils.exportToExcel(query, "订单列表导出");
}

defineExpose({ open });
</script>



<style lang="scss">
.checkboxGroup {
  .el-checkbox-group {
    max-height: 60vh;
    overflow-y: auto;
    .el-checkbox {
      display: block;
    }
  }
}
</style>

<style lang="scss" scope>
.header {
  background-color: #f8f8f9;
  color: #515a6e;
  overflow-y: auto;
  line-height: 45px;
  .grid {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 180px;
  }
}
</style>